<div class="hud" style="position:absolute;top: 100px; right: 180px;"
     ng-cloak draggable ng-if="HUD.visible">
  <div class="hud_header">
    Color Adjustments
    <a ng-click="HUD.hide()" class="close"><i class="icon-cancel-circle"></i></a>
  </div>
  <div class="hud_body">

    <div class="hud_box">
      <a ng-click="HUD.reset_changes()" class="hud_btn pull-right">Reset</a>
      <label class="checkbox">
        <input type="checkbox" ng-change="" ng-model="HUD.apply_to_general"> Apply to general scopes
      </label>
    </div>

    <hr>

    <div class="hud_box">
      <label>Brightness</label>
      <input type="range"  ng-change="HUD.update_colors()" min="-150" max="150" ng-model="HUD.brightness">
      <input type="number" ng-change="HUD.update_colors()" min="-150" max="150" ng-model="HUD.brightness">
    </div>

    <div class="hud_box">
      <label>Contrast</label>
      <input type="range"  ng-change="HUD.update_colors()" min="-100" max="300" ng-model="HUD.contrast">
      <input type="number" ng-change="HUD.update_colors()" min="-100" max="300" ng-model="HUD.contrast">
    </div>

    <hr>

    <div class="hud_box">
      <label class="checkbox">
        <input type="checkbox" ng-change="HUD.update_colors()" ng-model="HUD.colorize"> Colorize
      </label>
    </div>

    <div class="hud_box">
      <label>Hue</label>
      <input type="range"  ng-change="HUD.update_colors()" min="-180" max="180" ng-model="HUD.hue" class="hue_slider">
      <input type="number" ng-change="HUD.update_colors()" min="-180" max="180" ng-model="HUD.hue">
    </div>

    <div class="hud_box">
      <label>Saturation</label>
      <input type="range"   ng-change="HUD.update_colors()" min="-100" max="100" ng-model="HUD.saturation" class="saturation_slider">
      <input type="number"  ng-change="HUD.update_colors()" min="-100" max="100" ng-model="HUD.saturation">
    </div>

    <div class="hud_box">
      <label>Lightness</label>
      <input type="range"   ng-change="HUD.update_colors()" min="-100" max="100" ng-model="HUD.lightness" class="lightness_slider" >
      <input type="number"  ng-change="HUD.update_colors()" min="-100" max="100" ng-model="HUD.lightness">
    </div>

    <hr>

    <div class="hud_box">
      <a ng-click="HUD.filter_colors('invert')" class="hud_btn">Invert</a> &nbsp;&nbsp;
      <a ng-click="HUD.filter_colors('sepia')" class="hud_btn">Sepia</a> &nbsp;&nbsp;
      <a ng-click="HUD.filter_colors('grayscale')" class="hud_btn">Grayscale</a>
    </div>

  </div>
</div>
